<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<style type="text/css">
			#box {
				position: absolute;
				top: 100px;
				left: 100px;
				width: 200px;
				height: 200px;
				border: 1px solid gray;
				background: yellow;
			}
		</style>
		<div id="box">マウスをのせると・・・</div>
		
		<script type="text/javascript">
			var obj = null;
			var showImg = function(){
				obj = document.createElement('img');
				obj.src = "img/loading100.gif";
				obj.style.position = 'absolute';
				obj.style.left = '-50px';
				obj.style.top = '-50px';
				obj.style.display = 'block';
				
				document.getElementById('box').appendChild(obj);
			}
			
			showImg();
			
			document.getElementById('box').addEventListener('mouseover', function(e){
				var target = e.target;
				obj.style.display = 'none';
			}, false);
			document.getElementById('box').addEventListener('mouseout', function(e){
				obj.style.display = 'block';
			}, false);
		</script>
	</body>
</html>
